<template>
	<view class="content">
		<view class="main">
			<navgatsVue :navigationMsg="navigationMsg"></navgatsVue>
			<view class="demo_tops">
				<view class="demo_tops_left">
					<p style="font-size: 50rpx;font-weight: bold;margin-left: 40rpx;">待付款</p>
					<p style="margin-left: 40rpx;font-size: 25rpx;">您的订单未付款，请及时处理</p>
				</view>
				<view class="demo_tops_right">
					<p style="text-align: center;line-height: 100rpx;">剩 <span
							style="background-color: black;color: #ffffff;border-radius: 10rpx;">00</span>:<span
							style="background-color: black;color: #ffffff;border-radius: 10rpx;">00</span> :<span
							style="background-color: black;color: #ffffff;border-radius: 10rpx;">00</span>自动取消</p>
				</view>
				<view class="demo_center">
					<view class="center_left">
						<p
							style="width: 90%;height: 50%;font-size: 35rpx;font-weight: bold;line-height: 100rpx;margin-left: 5%;">
							{{addlists.name}}
						</p>
						<p style="width: 90%;height: 50%;margin-left: 5%;font-size: 30rpx;color: #ccc;">
							地址:{{addlists.city_text}}
							青秀区 民主路丽原天际11楼</p>
					</view>
					<view class="center_right">
						<u-button @click="btm_tz"
							style="width: 150rpx;height: 80rpx;border-radius: 40rpx;border: 1px solid black;margin-top: 70rpx;"
							text="修改"></u-button>
					</view>
				</view>

			</view>
			<view class="demo_centertwo">
				<view class="demo_centertwo_bt">
					<image style="width: 50rpx;height: 50rpx;margin-top: 10rpx;margin-left: 20rpx;"
						src="" mode=""></image>
					<p style="line-height: 70rpx;">官方严选店铺</p>
					<image src="/static/前进.png" style="width: 35rpx;height: 35rpx;margin-top: 17rpx;margin-left: 10rpx;"
						mode=""></image>
				</view>
				<view class="demo_centertwo_db">
					<view class="de_left">
						<image style="width: 80%; height: 100%;" :src="image+'/storage/default/20250318/appleb532600fc0462430424f4d3810b0066a7b189e65.png'" mode=""></image>
					</view>
					<view class="de_right">
						<p
							style="width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 35rpx; ">
							首月1元 </p>
						<p class="psd">套餐 ：手机租用套餐</p>
						<p class="psd">租期 ：{{datas.buy_out.date}}</p>
						<p class="psd">数量 ：1</p>
					</view>
				</view>

			</view>
			<view class="demo_centerthree">
				<view class="demo_centertwo_bts" style="border-bottom: 1px solid #E9E9E9;">
					<p style="line-height: 70rpx;font-size: 40rpx;font-weight: bold;"> 首期首付金额</p>
					<p style="position: absolute;right: 0;line-height: 70rpx;font-size: 40rpx;font-weight: bold;">
						{{buyprice}}
					</p>
				</view>
				<view class="three_btm">
					<view class="btm_zuo">
						<p style="line-height: 45rpx;">剩余租期</p>
						<p style="line-height: 45rpx;">总租金</p>
						<p style="line-height: 45rpx;">配送方式</p>
						<p style="line-height: 45rpx;">到期买断尾款</p>
					</view>
					<view class="btm_you">
						<p style="line-height: 45rpx;text-align: right;">￥{{datas.months[1].month_price}} *
							{{Object.keys(datas.months).length}}期
						</p>
						<p style="line-height: 45rpx;text-align: right;">￥{{prices}}</p>
						<p style="line-height: 45rpx;text-align: right;">顺丰快递|寄出包邮|归还自付</p>
						<p style="line-height: 45rpx;text-align: right;">￥{{firstprice}}</p>
					</view>
				</view>
			</view>
			<view class="demo_centerthree">
				<view class="demo_centertwo_bts" style="border-bottom: 1px solid #E9E9E9;" @click="ontans">
					<p style="line-height: 70rpx;font-size: 30rpx;"> 租赁服务</p>
					<p style="position: absolute;right: 50rpx;line-height: 70rpx;font-size: 30rpx;color: #ccc;">服务详情
					</p>
					<image style="width: 40rpx;height: 40rpx;position: absolute;right: 0;top: 18rpx;"
						src="/static/前进.png" mode=""></image>
				</view>

				<view class="biaoti">
					租赁服务费用用已包含在总租金内,占商品押金的5%
				</view>
				<view class="fenleis">
					<view class="fenleis_list">
						<p style="font-size: 28rpx;margin-top: 15rpx;margin-left: 10rpx;">随租服务</p>
						<p style="font-size: 23rpx;color: #989898;margin-left: 10rpx;">申请服务 ></p>
					</view>
					<view class="fenleis_list">
						<p style="font-size: 28rpx;margin-top: 15rpx;margin-left: 10rpx;">随时可买断</p>
						<p style="font-size: 23rpx;color: #989898;margin-left: 10rpx;">申请服务 ></p>
					</view>
					<view class="fenleis_list">
						<p style="font-size: 28rpx;margin-top: 15rpx;margin-left: 10rpx;">晚发必赔</p>
						<p style="font-size: 23rpx;color: #989898;margin-left: 10rpx;">申请服务 ></p>
					</view>
				</view>

			</view>
			<view class="demo_centerfour">
				<view class="four_top">
					<p style="margin-left: 35rpx;margin-top: 20rpx;">商品配件</p>
				</view>
				<view class="four_btm">
					<view class="btm_one">
						<view class="one_zuo">
							<p style="font-size: 30rpx;margin-top: 10rpx;margin-left: 20rpx;">需归还</p>
							<p style="font-size: 23rpx;margin-top: 5rpx;margin-left: 20rpx;color: #9B9C9C;">快充数据线 x1</p>

						</view>
						<view class="one_you">
							<p
								style="text-align: right;margin-right: 20rpx;line-height: 80rpx;text-decoration: line-through;color: #9B9C9C;">
								￥150</p>
						</view>
					</view>
					<view class="btm_two">
						<p style="font-size: 30rpx;margin-top: 10rpx;margin-left: 20rpx;">
							赠品
						</p>
						<p style="font-size: 23rpx;margin-top: 5rpx;margin-left: 20rpx;color: #9B9C9C;">
							租赁服务设备&emsp;划线价格 &emsp;耳机
						</p>
					</view>
				</view>
			</view>
			<view class="demo_five">
				<view class="five_top">
					<view class="five_top_left">
						<p style="margin-left: 30rpx;line-height: 100rpx;">交易快照</p>
					</view>
					<view class="five_top_right">
						<p style="text-align: right;line-height: 100rpx;color: #E66E6D;margin-right: 10rpx;">
							发生交易争议时，可作为判断依据 ></p>
					</view>
				</view>
				<view class="five_center">
					<view class="five_center_left">
						<p style="margin-left: 30rpx;line-height: 60rpx;">租赁服务相关协议</p>
						<p style="margin-left: 30rpx;line-height: 60rpx;">订单编号</p>
						<p style="margin-left: 30rpx;line-height: 60rpx;">创建时间</p>
						<p style="margin-left: 30rpx;line-height: 60rpx;">取消订单</p>
					</view>
					<view class="five_center_right">
						<p style="margin-left: 30rpx;line-height: 60rpx;margin-right: 10rpx;color: #E66E6D;">查看协议 ></p>
						<p style="margin-left: 30rpx;line-height: 60rpx;margin-right: 10rpx;" @click="kaobeis(orders)">
							{{data.order_sn}}
						</p>
						<p style="margin-left: 30rpx;line-height: 60rpx;margin-right: 10rpx;"></p>
						<p style="margin-left: 30rpx;line-height: 60rpx;margin-right: 10rpx;">申请取消 <span
								style="color: #CDCECE;"> > </span> </p>
					</view>
				</view>

				<view class="five_btm">
					为保障资金安全，请认准手机租赁平台，切勿线下交易，平台将无法提供保障服务
				</view>
			</view>
			<view class="demo_six">
				<uni-collapse>
					<uni-collapse-item :show-animation="true" title="关于违约">
						<text>
							<view class="title_psd">
								<p style="font-size: 5vw;color: #7B7070;">一、逾期交租/归还违约责任</p>
								<p style="font-size: 4vw; color:#B3B2B2 ;">租赁订单成立后，您需诚实履约，否则当您存在违约行为（如逾期交租、
									逾期归还）时达到《租赁服务协议》约定的用户已无归还租赁物可能性的
									情形时，商家可要求您支付赔偿，赔偿款的计算方式为：买断价-已付租
									金-已付（冻结）押金，如您在商家赔偿通知之日15天内未支付赔偿款，</p>
							</view>

						</text>
					</uni-collapse-item>
				</uni-collapse>

			</view>
			<view class="demo_btms">

			</view>
			<view class="postion">
				<view class="postion_left">

				</view>
				<view class="postion_right">
					<u-button @click="kefus()" text="联系客服" :plain="true" class="btn"
						style="border: 1px solid black;color: black;"></u-button>
					<u-button @click="backs()" text="取消订单" class="btn" color="black"></u-button>
					<u-button @click="xiadans()" text="去付款" class="btn" color="#FCD948"
						style="color: black;"></u-button>
				</view>
			</view>
			<u-popup :show="shows" :round="10" mode="bottom" @close="close" @open="open" :closeOnClickOverlay="true">
				<view class="tans">
					<view class="tan_top">
						<p style="font-size: 40rpx;margin-top: 30rpx;font-weight: bold;">
							租赁服务
						</p>
						<p style="font-size: 30rpx;margin-top: 20rpx;">
							按时交租，平台将担保您的全程租赁服务
						</p>
					</view>
					<view class="tan_btm">
						<view class="tan_btm_titlelist">
							<p style="font-size: 30rpx;font-weight: bold;">随租随还</p>
							<p style="line-height: 50rpx;">当下单时订单总租期为6期时，从第3期起可享随租随还;
								当下单时订单总租期为12期时，从第6期起可享随租随
								还;下单时订单总租期为15期时，从第8期起可享随租随
								还;下单时订单总租期为18期时，从第9期起可享随租随
								还。需要注意的是，归还时，当期已缴纳租金不退</p>
						</view>
						<view class="tan_btm_titlelist">
							<p style="font-size: 30rpx;font-weight: bold;">可随时买断</p>
							<p style="line-height: 50rpx;">订单处于待归还状态期间，用户可随时在「我的-订单列
								表」中找到对应订单，并点击左下角的「更多-买断」支
								付买断尾款即可完成买断!</p>
						</view>
						<view class="tan_btm_titlelist">
							<p style="font-size: 30rpx;font-weight: bold;">晚发必赔</p>
							<p style="line-height: 50rpx;">
								用户在订单发起扣款申请后12小时内完成了交付首期租金，若订单在_原定最晚发货日」仍朱发货，平台将自动发放1张优惠券至用户的账户作为赔付;若后续订单仍处子待发货状态，将每3天赔付1张优惠券，直至达到最
							</p>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		Details,
		get_address_list,
		generate,
		Pay,
		order_list,
		order_info
	} from "../../../api/api.js"
	import navgatsVue from "../../../common/navgatsindex/navgatsindex.vue";
	export default {
		data() {
			return {
				navigationMsg: {
					title: "订单详情",
					bgColor: "#FCD948"
				},
				show: true,
				image: "https://api.jingkakeji.com",
				orders: 2025032411203258,
				shows: false,
				ids: "",
				addlists: [],
				order_sn: "",
				data: [],
				cread_time: "",
				min_price: "",
				// 套餐租期与价格
				months: [],
				// 商品店铺
				shop: [],
				from_times: "",
		
				mony_one: "",
				idyes:"",
			
				infos:"",
				datas:[],
				// 尾款
				firstprice:"",
				// 首付
				buyprice:"",
				prices:""
			}
		},
		components: {
			navgatsVue
		},
		onLoad(opention) {
			console.log(opention)
			
			this.get_address_lists()
			
		},
		onShow() {
		// this.get_address_lists()
		this.datasd()
		this.suoorder()
		},
		methods: {
			datasd(){
				console.log(JSON.parse(uni.getStorageSync("submissionData")),"订单数据")
				this.datas=JSON.parse(uni.getStorageSync("submissionData"))
				this.firstprice=this.datas.buy_out.price
				this.buyprice=this.datas.payment.price
				console.log(this.firstprice+this.buyprice+(this.datas.months[1].month_price * Object.keys(this.datas.months).length),"总价")
				this.prices=this.firstprice+this.buyprice+(this.datas.months[1].month_price * Object.keys(this.datas.months).length)
				console.log(this.buyprice)
			},
			formatDate(value) {
				const data = new Date(value);
				const month = data.getMonth() + 1;
				const day = data.getDate();
				const year = data.getFullYear();
				const hours = data.getHours();
				const minutes = data.getMinutes();
				const seconds = data.getSeconds();
				const formtimes = `${year}-${month}-${day}`
				const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

				this.cread_time = formattedTime
				this.from_times = formtimes
				return formattedTime;
			},
			kefus() {
				uni.navigateTo({
					url: "/pages/mys/kefus/kefus"
				})
			},
			backs() {
				uni.navigateTo({
					url:`/pages/mys/cancel/cancel?id=${this.idyes}`
				})
			},
			async suoorder(){
				// console.log(uni.getStorageSync("ids"),"idsfj")
				let data=JSON.parse(uni.getStorageSync("ids"))
				console.log(data,"data")
				let res = await generate(data)
				console.log(res,"预定单数据")
				this.order_sn=res.data.data.order_sn
				console.log(this.order_sn)
			},
			async xiadans() {
				let data = {
					order_sn: this.order_sn
				}
				let res = await Pay(data)
				console.log(res, "模拟订单支付页面")
				
				uni.navigateTo({
					url:`/pages/mys/succeed/succeed?msg=${res.data.msg}`
				})
			},

			btm_tz() {
				uni.navigateTo({
					url: "/pages/mys/address/address"
				})
			},
			async get_address_lists() {
				let res = await get_address_list()
				console.log(res, "获取地址列表")
				console.log(res.data.data[0], "默认地址")
				this.addlists = res.data.data[0]
			},
			
			async ordersxq(ids) {
				let data = {
					order_id: ids
				}
					let res= await order_info(data)
					console.log(res,"订单详情")
					this.idyes=res.data.data.id
			},
			ontans() {
				this.shows = true
			},
			kaobeis(orders) {
				uni.setClipboardData({
					data: this.orders,
					success: function() {
						//调用方法成功
						console.log('success');
					}
				})

				// uni.showToast({
				// 	title: '复制成功',
				// 	//将值设置为 success 或者直接不用写icon这个参数
				// 	icon: 'success',
				// 	//显示持续时间为 2秒
				// 	duration: 2000
				// }) 
			},
			open() {
				// console.log('open');
			},
			close() {
				this.shows = false
				// console.log('close');
			}
		}
	}
</script>

<style>
	* {
		font-size: 3vw;
		/* font-family: Microsoft JhengHei; */
	}

	.content {
		width: 100vw;
		height: 100vh;
		/* position: absolute; */
		background-color: #F6F6F6;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		overflow-y: auto;
	}

	.main {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.demo_tops {
		width: 100%;
		height: 300rpx;
		background: linear-gradient(#fcd948, #F6F6F6);
		display: flex;
		position: relative;
	}

	.demo_tops_left {
		width: 50%;
		height: 100%;
	}

	.demo_tops_right {
		width: 50%;
		height: 100%;
	}

	.demo_center {
		position: absolute;
		width: 90%;
		height: 230rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		top: 150rpx;
		left: 5%;
		display: flex;
		overflow: hidden;
	}

	.center_left {
		width: 70%;
		height: 100%;
	}

	.center_right {
		width: 30%;
		height: 100%;
	}

	.demo_centertwo {
		/* position: absolute; */
		width: 90%;
		height: 270rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		/* top: 150rpx; */
		/* left: 5%; */
		display: flex;
		flex-direction: column;
		overflow: hidden;
		margin-top: 100rpx;
	}

	.demo_centertwo_bt {
		width: 100%;
		height: 70rpx;
		display: flex;
	}

	.demo_centertwo_db {
		flex: 1;
		display: flex;
	}

	.de_left {
		width: 30%;
		height: 100%;
	}

	.de_right {
		width: 70%;
		height: 100%;
	}

	.psd {
		font-size: 20rpx;
		color: #ccc;
		line-height: 45rpx;
	}

	.demo_centerthree {
		/* position: absolute; */
		width: 90%;
		height: 270rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		/* top: 150rpx; */
		/* left: 5%; */
		display: flex;
		flex-direction: column;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.demo_centertwo_bts {
		width: 90%;
		height: 70rpx;
		display: flex;
		position: relative;
		margin: 0 auto;
	}

	.three_btm {
		width: 90%;
		flex: 1;
		display: flex;
		margin: 0 auto;
	}

	.btm_zuo {
		width: 30%;
		height: 100%;
	}

	.btm_you {
		width: 70%;
		height: 100%;
	}

	.biaoti {
		width: 90%;
		height: 50rpx;
		font-size: 23rpx;
		line-height: 50rpx;
		margin: 0 auto;
		color: #ccc;
	}

	.fenleis {
		width: 90%;
		flex: 1;
		margin: 0 auto;
		display: flex;
		/* background-color: aqua; */
		justify-content: center;
	}

	.fenleis_list {
		width: 33%;
		height: 100rpx;
		background-color: #F6F6F6;
		border-radius: 20rpx;
		overflow: hidden;
		margin-left: 5rpx;
		margin-right: 5rpx;
		margin-top: 20rpx;
	}

	.demo_centerfour {
		/* position: absolute; */
		width: 90%;
		height: 270rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		/* top: 150rpx; */
		/* left: 5%; */
		display: flex;
		flex-direction: column;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.four_top {
		width: 100%;
		height: 80rpx;
	}

	.four_btm {
		width: 90%;
		height: 180rpx;
		margin: 0 auto;
		background-color: #F6F6F6;
		border-radius: 25rpx;
		overflow: hidden;
	}

	.btm_one {
		width: 100%;
		height: 50%;
		display: flex;
	}

	.one_zuo {
		width: 50%;
		height: 100%;
	}

	.one_you {
		width: 50%;
		height: 100%;


	}

	.btm_two {
		width: 100%;
		height: 50%;
	}

	.demo_five {
		/* position: absolute; */
		width: 90%;
		height: 400rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		/* top: 150rpx; */
		/* left: 5%; */
		display: flex;
		flex-direction: column;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.five_top {
		width: 100%;
		height: 100rpx;
		display: flex;
	}

	.five_top_left {
		width: 30%;
		height: 100%;
	}

	.five_top_right {
		width: 70%;
		height: 100%;
	}

	.five_center {
		width: 100%;
		height: 250rpx;
		display: flex;
	}

	.five_center_left {
		width: 50%;
		height: 100%;
	}

	.five_center_right {
		width: 50%;
		height: 100%;
		text-align: right;
	}

	.five_btm {
		width: 90%;
		height: 100%;
		margin: 0 auto;
		font-size: 20rpx;
		color: #E66E6D;
	}

	.demo_six {
		width: 90%;
		/* height: 400rpx; */
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		/* overflow: hidden; */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.somlls {
		flex: 1;
	}

	.postion {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		display: flex;
	}

	.postion_left {
		width: 35%;
		height: 100%;
	}

	.postion_right {
		width: 65%;
		height: 100%;
		display: flex;
	}

	.postion_right .btn {
		width: 150rpx;
		height: 70rpx;
		margin-top: 15rpx;
		border-radius: 40rpx;
	}

	.demo_btms {
		width: 100%;
		height: 300rpx;
	}

	.tans {
		width: 100%;
		height: 1200rpx;
		background-color: #FEF6C4;
		overflow: hidden;
		border-radius: 10px 10px 0 0;
		display: flex;
		flex-direction: column;

	}

	.tan_top {
		width: 90%;
		height: 200rpx;
		/* background-color: aliceblue; */
		margin: 0 auto;
	}

	.tan_btm {
		width: 90%;
		flex: 1;
		background-color: #ffffff;
		margin: 0 auto;
		border-radius: 30px 30px 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tan_btm_titlelist {
		width: 90%;
		/* height: 80rpx; */
		line-height: 80rpx;
		/* overflow-y: scroll; */
	}

	.title_psd {
		width: 90%;
		height: 350rpx;
		margin: 0 auto;
		overflow-y: scroll;
	}
</style>